<template>
  <div>
    <button @click="btn">+{{ msg }}</button>
    <hr />
    <input type="text" v-for="item in num" :key="item" v-focus />
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      flag: false,
      num: 0,
    };
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
  model: {
    prop: "msg",
  },
  props: {
    msg: {
      type: String,
    },
  },
  created() {},
  computed: {},
  methods: {
    btn() {
      //   this.flag = !this.flag;
      this.num++;
    },
  },
};
</script>
<style lang='less'  scoped>
input {
  border: 1px solid rgb(59, 252, 0);
  background: linear-gradient(
    to right,
    rgba(8, 252, 252, 0.4),
    rgba(209, 255, 6, 0.4)
  );
  outline-color: aquamarine;
}
</style>
